<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import { reactive, ref } from 'vue';
import { vLoading } from '../../packages/directives';
import ESLoading from '../../packages/components/loading/src/index.vue';

const loading = ref(true);
const opt = ref({
    loading: true,
    loadingText: 'loading...',
    loadingType: 'l0',
    color: 'red'
})

const change = () => {
    opt.value = {
        loading: !opt.value.loading,
        loadingText: 'loading...',
        loadingType: 'l0',
        color: 'red'
    };
    loading.value = !loading.value
}
</script>

<template>
    <BlockBox text="v-loading">
        <es-button status="info" @click="change()">切换</es-button>
        <div v-loading="opt" style="width: 500px;height: 200px;">
        </div>
        <div v-loading="loading" style="width: 500px;height: 200px;">
        </div>
        <hr>
        <div style="width: 500px;height: 200px;overflow-y: scroll;">
            <ESLoading></ESLoading>
            <ESLoading loadingType="l1"></ESLoading>
            <ESLoading loadingType="l2"></ESLoading>
            <ESLoading loadingType="l3"></ESLoading>
        </div>
    </BlockBox>
</template>

<style scoped></style>
